<template>
    <div class="my-date-picker" @mouseenter="setIcon" @mouseleave="showClose=false">
        <el-date-picker 
        class="newDateStyle" 
        style="width: 100%;"
        :clearable="false"
        v-model="time" 
        type="daterange" 
        @focus="onFocus"
        range-separator="~" 
        start-placeholder="开始时间" 
        end-placeholder="结束时间" 
        value-format="YYYY-MM-DD"
        @change="onChange"
        />
        <div class="c-rq-icon">
            <el-icon v-if="showClose" color="#04AE70" @click="clear"><CircleClose /></el-icon>
            <el-icon v-else color="#04AE70"><Calendar /></el-icon>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'

const props = defineProps({
    modelValue:'',
})

const emit = defineEmits(['update:modelValue','change','focus'])

const time = ref('')
const showClose = ref(false)

onMounted(()=>{
    time.value = props.modelValue 
})

const setIcon = ()=>{
    if(time.value){
        showClose.value = true
    }else{
        showClose.value = false
    }
}
const onChange = ()=>{
    console.log("time.value:",time.value)
    emit('update:modelValue',time.value) 
}

const onFocus = () => {
    emit('focus', {})
}

const clear = ()=>{
    time.value = ''
    onChange()
}
</script>
<style lang="scss" scoped>
.my-date-picker{
    position: relative;
    z-index: 100;
    height: 38px;
    .c-rq-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 100;
        right: 1px;
        top: 1px;
        width: 30px;
        height: 36px;
        background-color: #F9F9F9;
        &:hover{
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.el-range-editor{
    &.newDateStyle{
        &.el-input__inner{
            height: 38px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .el-range__icon{
            display: none;
        }
        .el-range-input{
            text-align: left;
        }
    }
}
</style>